<template>
    <Modal v-model="modal.bindTaskAndCourses"
           fullscreen
           footer-hide
           title="绑定课程"
    >
        <div>
            <a-transfer
                    :operations="['添加', '删除']"
                    :data-source="mockData"
                    :target-keys="targetKeys"
                    :disabled="disabled"
                    :show-search="showSearch"
                    :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
                    :show-select-all="false"
                    @change="onChange">
                <template
                        slot="children"
                        slot-scope="{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect },}">
                    <a-table bordered :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
                            :columns="direction === 'left' ? leftColumns : rightColumns"
                            :data-source="filteredItems"
                            size="small"
                            :style="{ pointerEvents: listDisabled ? 'none' : null }"
                            :custom-row="({ key, disabled: itemDisabled }) => ({
              on: {
                dblclick: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })">
                        <template slot="name" slot-scope="text,record">
                            <Button shape="circle" icon="md-eye" @click="scanDetail(record)"></Button>
                        </template>
                    </a-table>
                </template>
            </a-transfer>
            <scan-course-detail :modal="modal1" :placeList="placeList"/>
        </div>
    </Modal>

</template>
<script>
    import difference from 'lodash/difference';
    import 'ant-design-vue/dist/antd.css';
    import Vue from 'vue';
    import {Table,Transfer} from 'ant-design-vue';
    import scanCourseDetail from "./scanCourseDetail";
    Vue.use(Table);
    Vue.use(Transfer);
    var  mockData = []
    var originTargetKeys = []

    const leftTableColumns = [
        {
            dataIndex: 'courseCode',
            title: '课号',
        },
        {
            dataIndex: 'courseName',
            title: '课程名称',
        },
        {
            dataIndex: 'collegeName',
            title: '开课院系',
        },
        {
            dataIndex: 'classId',
            title: '班级',
        },
        {
            dataIndex: 'teacherNumber',
            title: '教师工号',
        },
        {
            dataIndex: 'teacherName',
            title: '教师姓名',
        },
        {
            dataIndex: 'title4',
            title: '上课时间地点',
            align:"center",
            width:100,
            scopedSlots: { customRender: 'name' },
        },
    ];
    const rightTableColumns = [
        {
            dataIndex: 'courseName',
            title: '课程名称',
        },
        {
            dataIndex: 'collegeName',
            title: '开课院系',
        },
        {
            dataIndex: 'classId',
            title: '班级',
        },
        {
            dataIndex: 'teacherName',
            title: '教师姓名',
        },
        {
            dataIndex: 'title4',
            title: '上课时间地点',
            align:"center",
            width:100,
            scopedSlots: { customRender: 'name' },
        },
    ];

    export default {
        components:{scanCourseDetail},
        data() {
            return {
                mockData,
                placeList:[],
                targetKeys: originTargetKeys,
                disabled: false,
                showSearch: false,
                leftColumns: leftTableColumns,
                rightColumns: rightTableColumns,
                map: {
                    page: 1,
                    size: 10
                },
                modal1:{
                    scanCourseDetail:false,
                    row:[]
                }
            };
        },
        props:{
            modal:{
                bindTaskAndCourses:false,
                taskId:''
                },
            },
        methods: {
            scanDetail(record){
                this.modal1.row = record.list

                //console.log(this.placeList)
                this.modal1.scanCourseDetail = true
            },
            onChange(nextTargetKeys) {
                let leftLen = originTargetKeys.length;
                let rightLen = nextTargetKeys.length;
                let confirm = "";
                if (leftLen<rightLen){
                    let _this = this
                    this.$Modal.confirm({
                        title:"提示",
                        content:"确认添加?",
                        onOk(){
                            _this.targetKeys = nextTargetKeys;
                            _this.http.post('/task/saveTaskbindCourse', {'list':nextTargetKeys,'taskId':_this.modal.taskId}).then(res => {

                            })
                        },
                        onCancel(){

                        }
                    })
                }else {
                    let _this = this
                    this.$Modal.confirm({
                        title:"提示",
                        content:"确认删除?",
                        onOk(){
                            _this.targetKeys = nextTargetKeys;
                        },
                        onCancel(){

                        }
                    })
                }


            },

            triggerDisable(disabled) {
                this.disabled = disabled;
            },

            triggerShowSearch(showSearch) {
                this.showSearch = showSearch;
            },
            getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
                return {
                    getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
                    onSelectAll(selected, selectedRows) {
                        const treeSelectedKeys = selectedRows
                            .filter(item => !item.disabled)
                            .map(({ key }) => key);
                        const diffKeys = selected
                            ? difference(treeSelectedKeys, selectedKeys)
                            : difference(selectedKeys, treeSelectedKeys);
                        itemSelectAll(diffKeys, selected);
                    },
                    onSelect({ key }, selected) {
                        itemSelect(key, selected);
                    },
                    selectedRowKeys: selectedKeys,
                };
            },
        },
        watch:{
          'modal.bindTaskAndCourses'(val){
              this.map.taskId = this.modal.taskId;
              this.http.post('/task/getAllCourse', this.qs.parse(this.map)).then(res => {
                  if (res.data) {
                      this.mockData = res.data.list
                  }
              })
              /**获得任务绑定的列表**/
              this.http.post('/task/getTaskBindCourseByTaskId', this.qs.parse(this.map)).then(res => {
                  if (res.data) {
                      let len = res.data.list.length;
                      for (let i=0;i<len;i++){
                          originTargetKeys.push(res.data.list[i].classId);
                      }
                      console.log(this.targetKeys)
                  }
              })
          }
        }
    };
</script>



